import React, { useEffect, useState } from "react";
import { Input, Button, message, Modal, Popconfirm } from "antd";
import { CheckOutlined } from "@ant-design/icons";

import { updateUserPassword } from "../../serve";

function Reset() {
  const [psd, setPsd] = useState([]);
  const [disable, setDisable] = useState(true);
  const [val, setVal] = useState(true);
  const [disable2, setDisable2] = useState(true);
  const [isModalVisible, setVisible] = useState(false);
  useEffect(() => {
    psd.Password && psd.Password.length >= 4
      ? setDisable(false)
      : setDisable(true);
    psd.transactionPassword && psd.transactionPassword.length >= 4
      ? setDisable2(false)
      : setDisable2(true);
  }, [psd]);
  let uid = localStorage.getItem("userId");
  const setPassword = (val) => {
    if (val == 1) {
      psd.Password.length >= 4
        ? updateUserPassword({
            userId: uid,
            password: psd.Password,
          }).then((r) =>
            r.result_code == 200
              ? (message.success("登录密码重置成功!"),
                localStorage.setItem("Authorization", ""),
                (window.location.href = "/login"))
              : null
          )
        : message.error("密码最少4位!");
      //
    } else {
      psd.transactionPassword.length >= 4
        ? updateUserPassword({
            userId: uid,
            transactionPassword: psd.transactionPassword,
          }).then((r) =>
            r.result_code == 200 ? message.success("管理密码重置成功!") : null
          )
        : message.error("密码最少4位!");
    }
  };
  const handleOk = () => {
    if (val == 1) {
      updateUserPassword({
        userId: uid,
        password: "a123456",
      }).then((r) =>
        r.result_code == 200
          ? (message.success("密码初始化成功!"),
            setVisible(false),
            localStorage.setItem("Authorization", ""),
            setTimeout(() => {
              window.location.href = "/login";
            }, 1600))
          : null
      );
    } else {
      updateUserPassword({
        userId: uid,
        transactionPassword: "a123456",
      }).then((r) =>
        r.result_code == 200
          ? (message.success("密码初始化成功!"), setVisible(false))
          : null
      );
    }
  };
  const resetSub = (val) => {
    setVal(val);
    setVisible(true);
  };

  return (
    <div style={{ textAlign: "center" }}>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      登录密码：
      <Input.Password
        maxLength={12}
        showCount
        placeholder="密码最少四位,最多12位!"
        style={{ width: "320px" }}
        onChange={(e) => {
          setPsd({
            ...psd,
            Password: e.target.value,
          });
        }}
      ></Input.Password>
      &nbsp;
      <Popconfirm
        title="确定重置吗?"
        onConfirm={() => setPassword(1)}
        disabled={disable}
      >
        <Button
          disabled={disable}
          type="primary"
          icon={!disable && <CheckOutlined />}
        >
          确认
        </Button>
      </Popconfirm>
      &nbsp;&nbsp; &nbsp;&nbsp;
      <Button type="primary" ghost onClick={() => resetSub(1)}>
        恢复为初始密码!
      </Button>
      <br />
      <br />
      <div style={{ display: localStorage.getItem("role") == 2 ? "none" : "" }}>
        管理密码：
        <Input.Password
          maxLength={12}
          showCount
          style={{ width: "320px" }}
          placeholder="密码最少四位,最多12位!"
          onChange={(e) => {
            setPsd({
              ...psd,
              transactionPassword: e.target.value,
            });
          }}
        ></Input.Password>
        &nbsp;
        <Popconfirm
          title="确定重置吗?"
          onConfirm={() => setPassword(2)}
          disabled={disable2}
        >
          <Button
            disabled={disable2}
            type="primary"
            icon={!disable2 && <CheckOutlined />}
          >
            确认
          </Button>
        </Popconfirm>
        &nbsp;&nbsp; &nbsp;&nbsp;
        <Button type="primary" ghost onClick={() => resetSub(2)}>
          恢复为初始密码!
        </Button>
        <br />
      </div>
      <br />
      <span
        type="primary"
        style={{
          display: "inline-block",
          transform: "translate(-90px ,0px)",
          letterSpacing: "1px",
          color: "#f16d6d",
        }}
      >
        密码设置最少4位,最多12位! <br />
        输入要修改的密码后,点击确认修改!
      </span>
      <Modal
        title="提示"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => setVisible(false)}
      >
        <p>
          此操作将 {val == 1 ? "登录密码" : "管理密码"}
          <span style={{ color: "red" }}> 恢复为初始值!</span>
        </p>
        <p>
          初始密码均为:
          <span style={{ fontWeight: 800, color: "red" }}>a123456</span>
        </p>
      </Modal>
    </div>
  );
}

export default Reset;
